<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员仪表板 - 养老院管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-brand">
        <h4 class="text-white">养老院管理系统</h4>
    </div>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">管理菜单</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" th:href="@{/admin/dashboard}">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>仪表板</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/users}">
                <i class="fas fa-fw fa-users"></i>
                <span>用户管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/elderly}">
                <i class="fas fa-fw fa-user-friends"></i>
                <span>老人管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/staff}">
                <i class="fas fa-fw fa-user-nurse"></i>
                <span>员工管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/health-records}">
                <i class="fas fa-fw fa-heartbeat"></i>
                <span>健康记录</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/medications}">
                <i class="fas fa-fw fa-pills"></i>
                <span>药物管理</span>
            </a>
        </li>
    </ul>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">账户</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/profile}">
                <i class="fas fa-fw fa-user-circle"></i>
                <span>个人资料</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/logout}">
                <i class="fas fa-fw fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand navbar-light bg-white mb-4 shadow">
        <button id="sidebarToggle" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fas fa-bars"></i>
        </button>
        <h5 class="mb-0">管理员仪表板</h5>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${#authentication.name}">管理员</span>
                    <i class="fas fa-user-circle fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="userDropdown">
                    <a class="dropdown-item" th:href="@{/profile}">
                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                        个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" th:href="@{/logout}">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 页面内容 -->
    <div class="container-fluid">
        <!-- 统计卡片 -->
        <div class="row">
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">老人总数</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${elderlyCount}">42</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-friends fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">员工总数</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${staffCount}">15</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-user-nurse fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">今日健康记录</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${todayHealthRecords}">18</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-heartbeat fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card dashboard-card danger shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">待处理事项</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${pendingTasks}">7</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和表格 -->
        <div class="row">
            <!-- 健康记录图表 -->
            <div class="col-xl-8 col-lg-7">
                <div class="card shadow mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">健康记录统计</h6>
                    </div>
                    <div class="card-body">
                        <div class="chart-area">
                            <canvas id="healthChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近活动 -->
            <div class="col-xl-4 col-lg-5">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">最近活动</h6>
                    </div>
                    <div class="card-body">
                        <div class="activity-feed">
                            <div class="feed-item" th:each="activity : ${recentActivities}">
                                <div class="date text-muted" th:text="${#dates.format(activity.timestamp, 'yyyy-MM-dd HH:mm')}">2023-06-15 14:30</div>
                                <div class="text" th:text="${activity.description}">张医生为王老先生添加了新的健康记录。</div>
                            </div>
                            <!-- 示例活动 -->
                            <div class="feed-item">
                                <div class="date text-muted">2023-06-15 14:30</div>
                                <div class="text">张医生为王老先生添加了新的健康记录。</div>
                            </div>
                            <div class="feed-item">
                                <div class="date text-muted">2023-06-15 13:45</div>
                                <div class="text">李护士更新了刘老太太的药物信息。</div>
                            </div>
                            <div class="feed-item">
                                <div class="date text-muted">2023-06-15 11:20</div>
                                <div class="text">系统管理员添加了新员工赵医生。</div>
                            </div>
                            <div class="feed-item">
                                <div class="date text-muted">2023-06-15 10:15</div>
                                <div class="text">新入住老人张先生的信息已登记。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近添加的老人 -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">最近添加的老人</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="recentElderlyTable" width="100%" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>入住日期</th>
                                    <th>健康状况</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="elderly : ${recentElderly}">
                                    <td th:text="${elderly.name}">王老先生</td>
                                    <td th:text="${elderly.age}">78</td>
                                    <td th:text="${elderly.gender}">男</td>
                                    <td th:text="${#dates.format(elderly.admissionDate, 'yyyy-MM-dd')}">2023-06-10</td>
                                    <td th:text="${elderly.healthStatus}">良好</td>
                                    <td>
                                        <a th:href="@{/admin/elderly/{id}(id=${elderly.id})}" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                <!-- 示例数据 -->
                                <tr>
                                    <td>王老先生</td>
                                    <td>78</td>
                                    <td>男</td>
                                    <td>2023-06-10</td>
                                    <td>良好</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>刘老太太</td>
                                    <td>82</td>
                                    <td>女</td>
                                    <td>2023-06-08</td>
                                    <td>稳定</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>张先生</td>
                                    <td>75</td>
                                    <td>男</td>
                                    <td>2023-06-05</td>
                                    <td>良好</td>
                                    <td>
                                        <a href="#" class="btn btn-sm btn-info">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<script th:src="@{/js/main.js}"></script>
<script>
    // 健康记录图表
    var ctx = document.getElementById('healthChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '健康记录数量',
                data: [65, 59, 80, 81, 56, 55],
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                borderColor: 'rgba(78, 115, 223, 1)',
                pointRadius: 3,
                pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointBorderColor: 'rgba(78, 115, 223, 1)',
                pointHoverRadius: 5,
                pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                pointHitRadius: 10,
                pointBorderWidth: 2,
                tension: 0.3
            }]
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 7
                    }
                }],
                yAxes: [{
                    ticks: {
                        maxTicksLimit: 5,
                        padding: 10,
                        beginAtZero: true
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }]
            },
            legend: {
                display: false
            },
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                intersect: false,
                mode: 'index',
                caretPadding: 10
            }
        }
    });
</script>
</body>
</html>